<template>
  <div>
    <div class="header">
<van-image
  width="60"
  height="60"
  fit="cover"
  round
  :src="userInfo.photo"
/>
<h2>{{userInfo.name}} <br>
 <van-tag color="#fff" text-color="#3aacfb">{{userInfo.birthday}}</van-tag>
</h2>
    </div>
    <van-row class=" user-nav">
  <van-col span="8" >
    <van-icon name="newspaper-o" color="#b5befe"/>
    <span>我的作品</span>
  </van-col>
  <van-col span="8">
     <van-icon name="star-o" color="#ff545e"/>
    <span>我的收藏</span>
    </van-col>
  <van-col span="8">
     <van-icon name="tosend" color="#ffb338"/>
    <span>阅读历史</span>
  </van-col>
</van-row>
<van-cell icon="edit" title="编辑资料" is-link  @click="$router.push('/edit')"/>
<van-cell icon="chat-o" title="小智同学" is-link @click="$router.push('/student')" />
<van-cell icon="location-o" title="系统设置" is-link />
<van-cell icon="warning-o" title="退出登录" is-link  @click="logout"/>
  </div>
</template>

<script>
import {getUserInfo} from './user.js';
import {removeToken} from  '@/utils/token.js'
export default {
name:'user',
data() {
  return {
    userInfo:{}
  }
},
created() {
  getUserInfo().then(res=>{
    console.log(res);
    this.userInfo=res.data.data
    this.$store.commit('updateUserInfo',res.data.data)
  })
},
methods: {
  logout(){
    this.$dialog.confirm({
  title: '标题',
  message: '确认要退出登录吗？',
})
  .then(() => {
    removeToken()
    this.$router.push('/login')

  })
 
  }
},
}
</script>

<style lang="less">
  .header{
    height: 100px;
    background-color: #0098fa;
    display: flex;
    align-items: center;
    .van-image{
   
     padding-left: 10px;
     padding-right: 10px;
  }
  }
  h2{
    font-size: 18px;
    color: #fff;
    font-weight: 400;
  }
  .user-nav{
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon{
      display: block;
      font-size: 24px;
      padding-bottom: 5px;
    }
  }
</style>